import "./index.scss";
import { useNavigate, useLocation } from "react-router-dom";
import { useState } from "react";
import {
  Tabs,
  Form,
  Modal,
  message
} from "antd";
import http from "../../../utils/http";
import TextArea from "antd/es/input/TextArea";


const Details = () => {
  //取数据
  const state = useLocation();
  console.log("state", state.state);

  //返回上一个页面
  const navigate = useNavigate();
  const back = () => {
    navigate("/home/examination");
  };

  //时间转换
  const toDub = (n: any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date: any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };

  //标签页
  const onChange = (key: string) => {
    console.log(key);
  };

  const tabItem = [
    {
      label: "基本信息",
      key: "1",
      children: (
        <>
          <div className="context-box">
            <div className="context">
              <div className="tr">
                <div className="td">许可证编码</div>
                <div>{state.state.onum}</div>
              </div>
              <div className="tr">
                <div className="td">办学地址</div>
                <div>{state.state.oaddress}</div>
              </div>
              <div className="tr">
                <div className="td">办学性质</div>
                <div>营利性培训机构</div>
              </div>
              <div className="tr">
                <div className="td">培养目标</div>
                <div>{state.state.ogoal}</div>
              </div>
              <div className="tr">
                <div className="td">办学层次</div>
                <div>培训机构</div>
              </div>
              <div className="tr">
                <div className="td">办学形式与类型</div>
                <div>函授</div>
              </div>
              <div className="tr">
                <div className="td">招生范围及对象</div>
                <div>{state.state.orange}</div>
              </div>
            </div>
          </div>
        </>
      ),
    },
    {
      label: "培训课程",
      key: "2",
      children: (
        <>
          <div className="context-box">
            <div className="context">
              <div className="tr">
                <div className="td">培训课程</div>
                <div>{state.state.ocourse}</div>
              </div>
              <div className="tr">
                <div className="td">培训形式</div>
                <div>{state.state.oform}</div>
              </div>
              <div className="tr">
                <div className="td">教学费</div>
                <div>2000元</div>
              </div>
              <div className="tr">
                <div className="td">教材费</div>
                <div>100元</div>
              </div>
              <div className="tr">
                <div className="td">总课时</div>
                <div>64</div>
              </div>
            </div>
          </div>
        </>
      ),
    },
  ];

  //审核不通过
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  //审核通过
  const [isModalOpen2, setIsModalOpen2] = useState(false);

  //待审核不通过
  const [val1] = Form.useForm();
  const showModal1 = (record: any) => {
    val1.setFieldsValue({ ...record });
    setIsModalOpen1(true);
  };
  const handleOk1 = () => {
    const data1 = val1.getFieldsValue(true);
    console.log('data1.id',state.state.id);
    http({
      url: "/editStateThree",
      method: "post",
      data: {
        id: state.state.id,
        ostate: "未通过",
        owhy: data1.owhy,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        navigate("/home/examination");
        setIsModalOpen1(false);
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };
  //待审核通过
  const [val2] = Form.useForm();
  const showModal2 = (record: any) => {
    val2.setFieldsValue({ ...record });
    setIsModalOpen2(true);
  };
  const handleOk2 = () => {
    http({
      url: "/editStateOne",
      method: "post",
      data: {
        id: state.state.id,
        ostate: "待审批",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        navigate("/home/examination");
        setIsModalOpen2(false);
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };

  return (
    <div className="details">
      <div className="top">
        <div className="top-l">
          <p className="title" onClick={back}>
            行政许可审批
          </p>
          <div>&gt;</div>
          <p className="detail">培训机构详情</p>
        </div>
      </div>

      <div className="hr"></div>

      <div className="chooseThrough">
        <div className="chooseLeft">
          <div className="bigName">
            <p>{state.state.oname}</p>
            <span>{state.state.ostate}</span>
          </div>
          <p>备案类型：{state.state.otype}</p>
          <p>提交时间：{toTime(state.state.otime)}</p>
        </div>
        <div className="chooseRight">
          <div className="one" onClick={showModal1}>
            不通过
          </div>
          <div className="two" onClick={showModal2}>通过</div>
        </div>
      </div>

      {/* 标签页 */}
      <Tabs
        defaultActiveKey="1"
        onChange={onChange}
        items={tabItem}
        className="tab"
      />

      {/* 审核不通过弹框*/}
      <Modal
        title="不通过"
        open={isModalOpen1}
        onOk={handleOk1}
        onCancel={handleCancel1}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val1}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入不同意理由" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 审核通过弹框 */}
      <Modal
        title="通过"
        open={isModalOpen2}
        onOk={handleOk2}
        onCancel={handleCancel2}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val2}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入审核意见" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default Details;
